<template>
	<el-container>
		<div class="left-panel">
			<div class="right-panel-search" style="width: 100%; margin-top: 5px; margin-bottom: 5px">
				<div class="panel-search-box">
					<span class="demonstration" style="margin-left: 10px">部门:</span>
					<el-input @keyup.enter="upsearch" v-model="search.name" placeholder="输入部门" style="margin-left: 10px; width: 180px"
						clearable></el-input>
				</div>
				<div class="panel-search-box">
					<el-button type="primary" style="margin-left: 10px" @click="upsearch">查询</el-button>
					<el-button type="" @click="cleanSearch">清空</el-button>
				</div>
			</div>
		</div>
		<el-header style="display: none"></el-header>
		<el-main class="nopadding">
			<scTable ref="table" border stripe :apiObj="apiObj" row-key="number" @selection-change="selectionChange">
				<el-table-column align="center" label="部门" prop="name"></el-table-column>
				<!-- <el-table-column align="center" label="组织" prop="orgName"></el-table-column> -->
				<el-table-column align="center" label="省份" prop="provinceName"></el-table-column>
				<el-table-column align="center" label="描述" prop="description"></el-table-column>

				<el-table-column label="操作" align="center">
					<template #default="scope">
						<el-button-group>
							<el-button text type="primary" size="small"
								@click="table_show(scope.row, scope.$index)">查看</el-button>
							<el-button text type="primary" size="small"
								@click="table_edit(scope.row, scope.$index)">编辑</el-button>
						</el-button-group>
					</template>
				</el-table-column>

			</scTable>
		</el-main>
	</el-container>
	<edit-dialog v-if="dialog.edit" ref="editDialog" @success="handleSaveSuccess" @closed="dialog.edit = false">
	</edit-dialog>
</template>

<script>
import editDialog from './edit'
export default {
	name: 'dep',
	components: {
		editDialog,
	},
	data() {
		return {
			index: false,
			dialog: {
				save: false,
				edit: false
			},
			apiObj: this.$API.dept.deptQueryListByEmp,
			selection: [],
			search: {
				keyword: null
			}
		}
	},
	methods: {
		//编辑
		table_edit(row) {
			this.dialog.edit = true
			this.$nextTick(() => {
				this.$refs.editDialog.open('edit').setData(row)
			})
		},
		//查看
		table_show(row) {
			this.dialog.edit = true
			this.$nextTick(() => {
				this.$refs.editDialog.open('show').setData(row)
			})
		},
		//表格选择后回调事件
		selectionChange(selection) {
			this.selection = selection;
		},
		//搜索
		upsearch() {
			this.$refs.table.upData(this.search)
		},
		cleanSearch() {
			this.search = {}
			this.$refs.table.reload()
		},
		//本地更新数据
		handleSaveSuccess(data, mode) {
			this.dialog.save = false
			if (mode == 'add') {
				this.$refs.table.refresh()
			} else if (mode == 'edit') {
				this.$refs.table.refresh()
			}
		}
	}
}
</script>

<style></style>
